<!-- 点位信息列表信息 -->
<template>
  <div style="width: 800px; max-width: 80vw;" class="q-pa-md bg-white">
    <div class="cursor-pointer row">
      <span class="text-body1 q-pl-sm">点位信息</span>
      <q-space></q-space>
      <q-icon name="mdi-close" @click="closeDialog"></q-icon>
    </div>
    <q-table
      ref="assetTable"
      flat
      class="my-sticky-column-table"
      :rows="dataList"
      :columns="columns"
      :filter="filter"
      no-data-label="暂无数据"
      no-results-label="过滤器没有发现任何结果"
      row-key="name"
      :visible-columns="visibleColumns"
      v-model:pagination="pagination"
      hide-pagination
      :loading="loading"
    >
      <!-- 表格的加载状态 -->
        <template v-slot:loading>
          <q-inner-loading showing color="grey" />
        </template>
      <!-- 表格顶部 -->
      <template v-slot:top>
        <div style="width: 230px" class="q-mt-xs q-mr-sm" >
          <q-select dense options-dense outlined v-model="headerSeach" :options="deviceNameOptions" />
        </div>
        <div v-show="headerSeach" style="width: 200px" class="q-mr-sm q-mt-xs">
          <q-input  outlined v-model="queryList[seachContent[headerSeach]]" dense />
        </div>
        <q-btn class="q-mr-sm q-mt-xs borderRadius" unelevated icon="search" padding="8px 8px 7px" color="primary" label="搜索" @click="handlerSearch" />
        <q-btn class="q-mr-sm q-mt-xs borderRadius" unelevated color="primary" padding="8px 8px 7px" label="复位搜索" @click="handleResetSearch" />
        <q-space />
        <q-select
          v-model="visibleColumns"
          multiple
          outlined
          dense
          options-dense
          :display-value="'表头选择'"
          emit-value
          map-options
          :options="columns"
          option-value="name"
          options-cover
          style="min-width: 150px"
          class="q-mt-xs q-mr-sm"
        />
      </template>
      <!-- 无数据提示信息 -->
      <template v-slot:no-data="{ message }">
        <div class="full-width row flex-center text-accent q-gutter-sm">
          <span>
            {{ message }}
          </span>
        </div>
      </template>
      <!-- 表格头部 -->
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th></q-th>
          <q-th
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
          >
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
      <!-- 表格主体 -->
      <template v-slot:body="props">
        <q-tr :props="props" >
          <q-td>
            <q-checkbox
              dense
              :val="props.row"
              v-model="selected"
              @update:model-value="selectedEvent"
            />
          </q-td>
          <q-td
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
          >
            {{ col.value }}
          </q-td>
        </q-tr>
      </template>
    </q-table>
    <!-- 分页 -->
    <Pagination
      :pagination="pagination"
      :pageSizes="['5条/页','10条/页','20条/页','30条/页']"
      @updatePage="updatePage"
      @updateSizes="updateSizes"
      @handlerRefresh="handlerRefresh"
    />
  </div>

</template>

<script>
import { ref } from 'vue'
import { featchMonitorSite } from 'src/api/siteMonitor'
import hosts from 'src/utils/host.js'
import Pagination from 'src/components/pagination'

const labelArr = {
  'id': 'ID',
  'sn': '点位编号',
  'alias_name': '点位名称',
  'type': '点位类型',
  'equip_id_sn': '隶属于资产',
  'dev_id_sn': '关联传感器',
  'img': '点位图片',
  'is_active': '是否激活',
  'modify_time': '修改时间',
  'create_time': '创建时间'
}
export default {
  data () {
    return {
      dataList: [],
      filter: ref(''),

      columns: [
        { name: 'idIndex', required: true, label: 'ID', align: 'center',field: 'idIndex', isSort: true},
        { name: 'sn', required: true, label: '点位编号', align: 'center',field: 'sn'},
        { name: 'alias_name', align: 'center', label: '点位名称', field: 'alias_name'},
        { name: 'type', align: 'center', label: '点位类型', field: 'type' },
        { name: 'equip_id_sn', align: 'center', label: '隶属于资产', field: 'equip_id_sn' },
        { name: 'dev_id_sn', align: 'center', label: '关联传感器', field: 'dev_id_sn' },
        { name: 'img', align: 'center', label: '点位图片', field: 'img' },
        { name: 'is_active', align: 'center', label: '是否激活', field: 'is_active'},
        { name: 'modify_time', align: 'center', label: '修改时间', field: 'modify_time'},
        { name: 'create_time', align: 'center', label: '创建时间', field: 'create_time'}
      ],

      // 表格头部
      headerSeach: ref(),
      deviceNameOptions: ['', '点位编号', '点位名称', '点位类型'],
       // 右侧表头选择
      visibleColumns: ref([]),
      pagination: { // 分页
          sortBy: 'desc', // 列名
          descending: false, // 是否按照降序排序
          page: 1, // 页码（当前显示第几页的数据）
          rowsPerPage: 5, // 每页多少行
          rowsNumber: 10 // 共多少条
      },
      queryList: {
        page: 1,
        page_size: 5,
        ordering: 'id'
      },
      loading: false,
      seachContent: {
        '点位编号' : 'sn',
        '点位名称' : 'alias_name',
        '点位类型' : 'type'
      },
      selected: []
    }
  },
  components: {
    Pagination
  },

  beforeCreate() {
  },
  mounted() {
    this.handleSelect()
    this.feathOranizerList()
  },

  methods: {
    // 刷新
    handlerRefresh() {
      this.handleResetSearch()
    },
    /**
     * 搜索
     */
    handlerSearch() {
      this.feathOranizerList()
    },
    /**
     * 复位搜索
     */
    handleResetSearch() {
      this.pagination = {
        sortBy: 'desc',
        descending: false,
        page: 1,
        rowsPerPage: 5
      }
      this.queryList = {
        page: 1,
        page_size: 5,
        ordering: 'id'
      }
      this.headerSeach = ''
      this.feathOranizerList()
    },
    /**
     * 排序
     */
    handlerSort() {
      this.pagination.descending = !this.pagination.descending
      this.feathOranizerList()
    },
    /**
     * 获取资产信息的列表
     */
    feathOranizerList() {
      this.loading = true
      this.queryList.page = this.pagination.page
      this.queryList.page_size = this.pagination.rowsPerPage
      this.queryList.ordering = this.pagination.descending?'-id':'id'
      featchMonitorSite(this.queryList).then(res => {
        const {status, data, totalCounts} = res
        if (status === 200) {
          this.dataList = []
          if (data && data.length > 0) {
            data.forEach((item, index) => {
              // 图片路径
              if (item.img && item.img.indexOf('http://') < 0) item.img = hosts + item.img
              // 创建时间
              if (item.create_time) item.create_time = item.create_time.substr(0, 10) + ' ' + item.create_time.substr(11, 8)
              // 修改时间
              if (item.modify_time) item.modify_time = item.modify_time.substr(0, 10) + ' ' + item.modify_time.substr(11, 8)
              // 是否激活
              if (item.is_active && item.is_active === 'True') {
                item.is_active = '是'
              } else if (item.is_active && item.is_active === 'False') {
                item.is_active = '否'
              }
              // 处理序号
              if (!this.pagination.descending) {
                item.idIndex = index + 1 + (this.queryList.page - 1) * this.queryList.page_size
              } else {
                item.idIndex = totalCounts - index - (this.queryList.page - 1) * this.queryList.page_size
              }
              this.dataList.push({
                id: item.id,
                idIndex: item.idIndex,
                sn: item.sn,
                alias_name: item.alias_name,
                type: item.type,
                equip_id_sn: item.equip_id_sn,
                dev_id_sn: item.dev_id_sn,
                img: item.img,
                is_active: item.is_active,
                modify_time: item.modify_time,
                create_time: item.create_time
              })
            });
          }
          this.pagination.rowsNumber = totalCounts
        }
        this.loading = false
      }).catch(_ => {
        this.loading = false
      })
    },
    /**
     * 处理数据
     */
    handleSelect() {
      this.visibleColumns = []
      this.columns.forEach((item, index) => {
        if (index < 6) this.visibleColumns.push(item.name)
      })
    },
    /**
     * 关闭对话框
     */
    closeDialog() {
      this.$emit('closeDialog', false)
    },
    /**
     * 选择事件
     */
    selectedEvent(val) {
      if (val.length === 1) {
          this.$emit('selectedEvent', val)
          return
        }
        if (val && val.length > 1) {
          this.selected = val.slice(val.length-1, val.length)
          this.$emit('selectedEvent', this.selected)
        }
    },
    // 切换当前页数
    updatePage(val) {
      if (!val) return
      this.pagination.page = val*1
      this.feathOranizerList()
    },
    // 切换每页的行数
    updateSizes(val) {
      this.pagination.rowsPerPage = parseFloat(val)
      this.feathOranizerList()
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
